import React, { useContext, useState, createContext } from 'react'

const MyContext = createContext()

function Context() {
    const [num] = useState(888)
    return (
        <div>
            Context -- { num }
            <MyContext.Provider value={ num }>
                <Father/>
            </MyContext.Provider>
        </div>
    )
}

function Father() {
    return (
        <div>
            Father --
            <Son/>
        </div>
    )
}

function Son() {
    const data = useContext(MyContext)
    return (
        <div>
            Son -- { data }
        </div>
    )
}

export default Context
